<script setup>
import banner from '@/assets/img/banner.png'
import chatIcon from '@/assets/img/chat.png'
import starIcon from '@/assets/img/star.png'
import send from '@/assets/img/send.png';
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { useKeywordStore } from '@/stores/keyword'
const value = ref('');
const router = useRouter()
const store = useKeywordStore()
const onSearch = (str = '') => {
  console.log('or use this.value', value.value);
  if (!str && !value.value?.trim()) {
    message.warn('请输入查询内容');
    return
  }
  store.setKeyword(str || value.value)
  router.push({
    name: 'chat',
  })
};

// 首页”猜你想搜“的搜索列表
const data = ref([
  '快速提取科技政策中的亮点措施',
  '快速提取科技政策中的关键词',
  '看看科技政策的分类',
  '看看科技政策亮点措施的分类',
]);
</script>

<template>
  <div class="container">
    <main class="home">
      <img class="banner" :src="banner" />
      <div class="search-wrap">
        <a-input class="search-input" :maxlength="4096" @pressEnter="onSearch('')" size="large" placeholder="请输入..."
          v-model:value="value" />
        <a-tooltip title="查询">
          <div class="search" @click="onSearch('')">
            <img :src="send" alt="Send" />
          </div>
        </a-tooltip>
      </div>

      <div class="tip-wrap">
        <img :src="starIcon" />
        <div class="text">猜你想搜</div>
      </div>
      <ul class="more-list">
        <li v-for="item in data" :key="item" @click="onSearch(item)">
          <a-avatar :src="chatIcon" />
          {{ item }}
        </li>
      </ul>
    </main>
  </div>
</template>

<style scoped lang="less">
.home {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .banner {
    width: 70%;
  }

  .tip-wrap {
    display: flex;
    align-items: center;
    padding: 20px 0 10px 0;
    width: 100%;

    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    .text {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.more-list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;

  li {
    padding: 6px 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #fff;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;

    &:hover {
      color: #333;
      text-decoration: underline;
    }
  }
}

.search-wrap {
  position: relative;
  bottom: 30px;
  width: 100%;
}

.search-wrap :deep(input) {
  line-height: 50px;
  height: 50px;
  padding-left: 10px;
  padding-right: 40px;
  font-size: 16px;
}

.search {
  position: absolute;
  right: 20px;
  top: 10px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  z-index: 10;

  img {
    width: 22px;
    height: 22px;
  }
}
</style>
